<template>
	<!-- 弹窗功能 -->
	<el-dialog :modelValue="dialogVisible" title="Tips" :width="width+'%'" :fullscreen="fullscreen" draggable :show-close="false">
		 <template #header>
		    新建人员类别
			<div>
				<el-icon size="20" color="#333" style="cursor: pointer; margin-right: 10px;" @click="full" v-if="fullscreen"><CopyDocument /></el-icon>
				<el-icon size="20" color="#333" style="cursor: pointer; margin-right: 10px;" @click="full" v-else><FullScreen /></el-icon>
				<el-icon size="20" color="#333" style="cursor: pointer;" @click="cancel"><Close /></el-icon>
			</div>
		 </template>
		 <!-- 正文部分 -->
		 <el-form :model="form" label-width="60px" label-position="left">
			 <el-row :gutter="20">
				 <el-col :span="12">
					 <el-form-item label="名称">
					   <el-input v-model="form.name" />
					 </el-form-item>					     
				 </el-col>
				 <el-col :span="12">
					 <el-form-item label="类别">
					   <el-select v-model="form.region" style="width: 100%;" placeholder="please select your zone">
						 <el-option label="Zone one" value="shanghai" />
						 <el-option label="Zone two" value="beijing" />
					   </el-select>
					 </el-form-item>
				 </el-col>
				 <el-col :span="12">
					 <el-form-item label="编码">
					   <el-input v-model="form.name" />
					 </el-form-item>					     
				 </el-col>
				 <el-col :span="12">
					 <el-form-item label="英文名">
					   <el-input v-model="form.name" />
					 </el-form-item>	
				 </el-col>				 
				 <el-col :span="24">
					 <el-form-item label="备注">
					   <el-input v-model="form.desc" type="textarea" />
					 </el-form-item>
				 </el-col>
			 </el-row>
		 </el-form>
		 <template #footer>
		   <span class="dialog-footer">
			 <el-button type="primary" size="small" @click="submit">确认</el-button>
			 <el-button @click="cancel" size="small">取消</el-button>			 
		   </span>
		 </template>
	</el-dialog>
</template>

<script>
    export default {
		name: 'cateForm',
		props:{
			dialogVisible:Boolean,
			width:{
				type:Number,
				value:30,
			},
		},
		created() {
		},
		mounted(){
			
		},
        data () {
            return {
				fullscreen:false,
				form:{
					name:"",
					region:"",
					desc:"",
				},
            }
        },
		methods:{					
			cancel(){
				let that  = this;				
				that.$emit("dialogVisibleByValue",false)
			},
			full(){
				let that  = this;				
				that.fullscreen = !that.fullscreen;
			},
			submit(){
				
			},
		}
    }
</script>
<style>
</style>